<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02_组件-注册全局组件</title>
  <!-- 
  在 Vue 3 中，全局组件是指在整个应用中都可以使用的组件。通过全局注册组件，开发者可以在任何地方使用这些组件，而无需在每个组件中单独导入和注册。
  1. 全局组件的注册
  全局组件的注册通常在  `main.js`  文件中进行，使用  `app.component`  方法。基本语法如下：
  import { createApp } from 'vue';
  import App from './App.vue';
  import MyComponent from './components/MyComponent.vue'; // 导入全局组件

  const app = createApp(App);

  // 注册全局组件
  app.component('MyComponent', MyComponent);

  app.mount('#app');
  在这个例子中， `MyComponent`  被注册为全局组件，可以在整个应用中使用。

  2. 使用全局组件
  一旦组件被全局注册，就可以在任何组件的模板中使用，无需再次导入。例如：
  <template>
    <div>
      <h1>欢迎使用全局组件!</h1>
      <MyComponent />
    </div>
  </template>
  3. 组件名称
  全局组件的名称通常使用大写字母开头的 PascalCase 风格或用短横线分隔的小写字母（kebab-case）风格：

  - PascalCase:  `<MyComponent />` 
  - Kebab-case:  `<my-component />` 

  4. 适用场景
  - 重复使用的组件：适合在多个地方使用的组件，如按钮、模态框、导航栏等。
  - 第三方库组件：使用第三方 UI 库时，通常会全局注册组件以方便使用。

  5. 注意事项
  - 命名冲突：确保全局组件名称唯一，避免与其他组件或 HTML 标签冲突。
  - 性能考虑：全局组件会在整个应用中存在，可能会增加内存占用。在某些情况下，局部注册可能更合适。
  - 局部注册：如果只在某个特定组件中使用，建议进行局部注册，以提高代码的可维护性。

  6. 总结
  - 全局组件注册：使用  `app.component`  方法在  `main.js`  中注册全局组件。
  - 使用方便：全局组件可以在任何地方使用，无需重复导入。
  - 命名规则：遵循 PascalCase 或 kebab-case 命名风格。
  - 适用场景：适合重复使用的组件和第三方库组件。
  - 注意事项：避免命名冲突，考虑性能影响。
  -->
  <style>
    .product {
      background-color: orange;
    }
  </style>
</head>
<body>

  <div id="app">
    <home-nav></home-nav>
    <product-item></product-item>
    
    <home-nav></home-nav>
    <product-item></product-item>

    <h3>注意: 标签不支持大写</h3>
    <!-- <ProductItem></ProductItem> -->
  </div>

  <template id="nav">
    <h2>全局组件注册：使用app.component</h2>
    <h4>=============================</h4>
    <h3>全局组件的特点: 可以在任何组件中使用</h3>
    <product-item></product-item>
    <h4>=============================</h4>
  </template>

  <template id="item">
    <div class="product">
      <h2>{{ product.name }}</h2>
      <div>商品价格: <span>¥{{ product.price }}</span></div>
      <p>商品描述信息, 5999.9秒杀</p>
      <button @click="favarItem">收藏</button>
    </div>
  </template>

  <script src="../lib/vue.js"></script>
  <script>
    /*
      1.通过app.component(组件名称, 组件的对象)
      2.在App组件的模板中, 可以直接使用product-item的组件
    */
    const { createApp, ref, reactive } = Vue

    const app = createApp({})

    app.component('HomeNav', {
      template: '#nav',
    })

    app.component('product-item', {
      template: '#item',
      setup() {
        const product = reactive({
          name: 'iPhone 13',
          price: 6999,
        })

        const favarItem = () => {
          console.log('收藏商品')
        }

        return {
          product,
          favarItem
        }
      }
    })

    app.mount('#app')

  </script>
  
</body>
</html>